<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let provinces=[] //如果json是{}开头结尾的就用{}
			function init(){
				//1.创建核心对象 固定的
				let xhr =new XMLHttpRequest()
				//2.创建请求
				xhr.open("GET","city.json",false) //第二个写地址,false 表示同步
				//3.发送请求 固定的
				xhr.send()
				//4.接收,解析,显示数据
				let data=xhr.responseText //以文本的方式进行接收JSON,变成一个json 串
				provinces=JSON.parse(data)//将json 串转换成数组
				//将所有省份的名字添加到s1
				for (let i = 0; i < provinces.length; i++) {
					//将第i 个省的名字添加到第i 个选项中
					s1.options[i]=new Option(provinces[i].name)
				}
				//将四川的城市加载到s2中
				for (let i = 0; i < provinces[0].cities.length; i++) {
					s2.options[i]=new Option(provinces[0].cities[i])
				}
			}
			function change(){
				let index=s1.selectedIndex
				s2.length=0 //清空城市数据
				for (let i = 0; i < provinces[index].cities[i].length;i++) {
					s2.options[i]=new Option(provinces[index].cities[i])
				}
			}
		</script>
	</head>
	<body onload="init()">
		请选择：<select id="s1" onchange="change()"></select>省
		<select id="s2"></select>市
		<script type="text/javascript">
			const s1=document.querySelector("#s1")  //const定义常量
			const s2=document.querySelector("#s2")
		</script>
	</body>
</html>
